<template>
  <div>
  	<!--start 头部-->
  	<!--<div class="inside_header">
  		<mt-header fixed :title="vue_header_title">
			  <mt-button icon="back" @click="$router.go(-1)" slot="left"></mt-button>
			</mt-header>
  	</div>-->
  	<div class="sreePublic">
  		<div id="" style="text-align: center;">
  			<em class="iconfont" @click="$router.go(-1)">&#xe61f;</em>
  		</div>
			{{vue_header_title}}
  	</div>
  	<!--start 头部-->
  	<!--start content-->
  	<div class="content" ref="content">
  		<div class="invoiceType">
  			<p>发票类型</p>
  			<div class="typeBtn clearfix">
  				<div class="fl" :class="{active:index==vue_invoiceType_index}" @click="vFun_invoiceType_select(index,item.value)" v-for="(item,index) in vue_invoiceType_dataList">{{item.name}}</div>
  			</div>
  		</div>
  		<div class="invoiceList">
  			<Radio-group v-model="vertical" vertical>
	  			<ul>
	  				<li v-for="item in MemberInvoiceData">
	  					<p @click="vFun_select_invoice(item)">发票抬头： {{item.invoiceTitle}}</p>
	  					<div class="clearfix">
					      <span :class="{redColor:item.invoiceDefault=='1'}" @click="vFun_invoice_setDefault(item)">{{item.defaultText}}</span>
	  						<p class="fr">
	  							<span @click="vFun_invoice_update(item)">编辑</span>
	  							<span @click="vFun_invoice_delete(item)">删除</span>
	  						</p>
	  					</div>
	  				</li>
	  			</ul>
  			</Radio-group>
  		</div>
  	</div>
  	<!--end content-->
  	<!--start footer-->
  	<div class="footer" ref="footer" v-if="vue_type" @click="vfun_addinvoice">
  		+   新建发票
  	</div>
  	<!--end footer-->
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
  data () {
    return {
    	vertical:'',
    	vue_type:false,      //控制新添发票按钮显示、隐藏
    	vue_header_title:'发票信息',  //头部title
    	vue_invoiceType_dataList:[     //发票类型按钮的文字显示
	    	{
	    		name:'不开发票',
	    		value:""
	    	},{
	    		name:'普通发票',
	    		value:"2"
	    	},{
	    		name:'增值税发票',
	    		value:"3"
	    	}
    	],
    	vue_invoiceType_index:'',  //选择了发票类型的第几个
    	MemberInvoiceData:{},     //普通发票、增值税发票的列表数据展示
    }
  },
  methods:{
    //设为默认
  	vFun_invoice_setDefault(item){
  		if(item.invoiceDefault=='1'){
  			return
  		}else{
  			this.axios({
  				method:"PATCH",
  				url:"/v3/member/invoices/"+item.invoiceCode+"/makeDefault",
  				params:{
  					'memberCode':item.memberCode,
  				},
  				data:{}
  			}).then(res=>{
  				this.vFun_invoice_getList(localStorage.getItem("invoiceType"));
  			}).catch(err=>{
  				this.Public.vFun_openError(err.response.data)
  			})
  		}
  	},

    //删除发票弹窗
  	vFun_invoice_delete(item){
			MessageBox({
			  title: '提示',
			  message: '你确定要删除这条发票信息吗？',
			  confirmButtonText:'确定',
			  cancelButtonText:'取消',
			  confirmButtonClass:'redBg',
			  showCancelButton: true
			}).then((btnType)=>{
				if(btnType=='confirm'){
					this.vFun_invoice_deleteCall(item);
				}else{

				}
			})
  	},

    //删除发票点击确认
  	vFun_invoice_deleteCall(item){
  		this.axios({
  			method:'DELETE',
  			url:'/v3/member/invoices/'+item.invoiceCode,
  			data:{},
  			params:{
  				memberCode:''
  			}
  		}).then(res=>{
  			this.Public.vFun_openSuccess('操作成功！');
  			this.vFun_invoice_getList(localStorage.getItem("invoiceType"));
  		}).catch(err=>{
  			this.Public.vFun_openError(err.response.data);
  		})
  	},

    //编辑发票
  	vFun_invoice_update(item){
  		this.$router.push({path:'/addinvoiceInfo'});
  		localStorage.setItem('updateInvoiceCode',item.invoiceCode);
  	},

    //根据type分别获取列表数据
  	vFun_invoice_getList(type){
  		this.axios({
  			method:'POST',
  			url:"/v3/member/invoices/listAll/"+type,
  			data:{},
  			params:{
  				"memberCode":localStorage.getItem("memberCode")
  			}
  			}).then((res) => {
  				this.MemberInvoiceData=res.data.list;
  				this.MemberInvoiceData.forEach(item=>{
  					item.defaultText=item.invoiceDefault=='1'?'默认':'设为默认';
  				})
				}).catch((err)=>{
  		})
  	},

    //选择发票类型
  	vFun_invoiceType_select(index,val){
  		if(index===0){
  			this.$router.push({path:'/saveOrder'});
  			localStorage.removeItem('invoice');
  			localStorage.removeItem('invoiceType');
  		}
  		this.vue_invoiceType_index=index;
			localStorage.setItem("invoiceType",val);
  		if(val!=''){
  			this.vue_type=true;
	  		this.vFun_invoice_getList(val);
			}else{
				this.MemberInvoiceData='';
				this.vue_type=false;
			}
  	},

  	//新建发票、并跳转新发票填写页面
  	vfun_addinvoice(){
      localStorage.removeItem('updateInvoiceCode');  //清空编辑时带过去的数据
  		this.$router.push({path:'/addinvoiceInfo'});
  	},

  	//选择发票列表中的某列，并带数据回订单填写页面
  	vFun_select_invoice(data){
  		localStorage.setItem('invoice',JSON.stringify(data));
  		this.$router.push({path:'/saveOrder'});
  	}

  },
  activated(){
  	if(localStorage.getItem("invoiceType")=='2'){
      this.vFun_invoiceType_select(1,'2')
    }else if(localStorage.getItem("invoiceType")=='3'){
      this.vFun_invoiceType_select(2,'3')
    }
  },
  created(){
    //初始化页面的发票类型选择
  	if(localStorage.getItem("invoiceType")=='2'){
      this.vFun_invoiceType_select(1,'2')
    }else if(localStorage.getItem("invoiceType")=='3'){
      this.vFun_invoiceType_select(2,'3')
    }

  },
  mounted(){

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.inside_header{
		height:1.2rem;
	}
	.content{
		/*background:#D2D3D9;*/
		padding-bottom:1.33rem;
		margin-top:1.2rem;
	}
	.invoiceType{
		width:10rem;
		background:#fff;
		margin-bottom:0.26rem;
		border-bottom:1px solid #BBBBBB;
		padding:0 10px;
	}
	.invoiceType>p{
		padding:5px 0;
	}
	.invoiceType .typeBtn>div{
		padding:5px 10px;
		border:1px solid #ccc;
		color:#ccc;
		margin-right:15px;
		margin-bottom:10px;
	}
	.invoiceType .typeBtn>div.active{
		border-color:#D50B0A;
		color:#D50B0A;
	}
	.invoiceList ul{
		background:#D2D3D9;
	}
	.invoiceList ul li {
		background:#fff;
		margin-top:10px;
	}
	.invoiceList ul li>p:nth-of-type(1){
		width:100%;
		height:1.33rem;
		line-height:1.33rem;
		padding:0 10px;
		border-bottom:1px solid #bbb;
	}
	.invoiceList ul li>div:nth-of-type(1){
		width:100%;
		height:1.33rem;
		line-height:1.33rem;
		padding:0 10px;
		border-bottom:1px solid #bbb;
		color:#D2D0D2;
	}
	.invoiceList ul li>div:nth-of-type(1)>p>span{
		margin-right:10px;
	}
	.invoiceList label{
		float: left;

	}

	.footer{
		position:fixed;
    width: 98%;
    height: 1.4rem;
		left:0;
		bottom:0;
    line-height: 1.4rem;
		font-size:16px;
		text-align:center;
    margin-left: 1%;
    margin-bottom: 1%;
    color: #fff;
    text-align: center;
    background: #D50B0A;
    border-radius: 4px;
	}
	.redColor{
		color:#D50B0A;
	}
</style>
